<!--
 @description 首页弹窗信息配置
 @fileName index.vue
 @author zengqiongying
 @created 2024/10/22 15:14:35
-->
<template>
  <div>
    <table-box
      ref="refTable"
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      :off-set="-10"
      :table-sortable="false"
      table-row-key="id"
      show-index
      :show-custom-collect="false"
      :show-custom-combine="false"
      :show-custom-setting="true"
      :setting-auto-request="false"
      @btnOperate="btnOperate"
    />
    <edit
      v-if="showEdit"
      ref="refEdit"
      :visible.sync="showEdit"
      :detail="activeRowData"
      @success="refreshTable"
    />
    <detail
      v-if="showDetail"
      :visible.sync="showDetail"
      :detail="activeRowData"
    />
    <red-log
      v-if="showRedLog"
      :visible.sync="showRedLog"
      :source-id="activeRowData.id"
    />
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { delConfig, updatState } from '@/api/indexPageTip'
import Edit from './Edit'
import Detail from './Detail'
import RedLog from './RedLog'
export default {
  name: 'IndexPageTip',
  components: { Edit, Detail, RedLog },
  data() {
    return {
      showDetail: false, // 详情查看
      showEdit: false, // 是否编辑
      showRedLog: false, // 查看已读明细
      activeRowData: '', // 当前选中行数据
      tableSelected: [], // 当前所选中表格行数据
      otherFilters: [], // 表格额外查询条件
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/indexPageTip/page`,
        onlySearchBar: false,
        pageSize: 20,
        sort: 'createTime',
        order: 'desc',
        setting: [
          {
            prop: 'name',
            label: '弹窗名称',
            minWidth: 150,
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'displayTerminal',
            label: '展示平台',
            width: 150,
            type: 'select',
            propEnum: {
              list: [
                { dictCode: 'SAD-APP', dictName: '销售宝APP' },
                { dictCode: 'SAD-PAD', dictName: '销售宝PAD' },
                { dictCode: 'SAD-PC', dictName: '销售宝PC' }
              ]
            }
          },
          {
            prop: 'beginTime',
            label: '开始时间',
            minWidth: 150,
            align: 'center',
            formatData: ({ beginTime }) => {
              return parseTime(beginTime)
            }
          },
          {
            prop: 'endTime',
            label: '结束时间',
            minWidth: 150,
            align: 'center',
            formatData: ({ endTime }) => {
              return parseTime(endTime)
            }
          },
          /* {
            prop: 'enableFlag',
            label: '状态',
            width: 80,
            type: 'select',
            align: 'center',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'content-center',
              dictTypeCode: 'STATE'
            }
          }, */
          {
            prop: 'status',
            label: '状态',
            width: 100,
            type: 'hidden'
          },
          {
            prop: 'readCount',
            label: '已读数量',
            minWidth: 100,
            align: 'center',
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleRedLog
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: 150,
            type: 'hidden'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            minWidth: 150,
            formatData: ({ createTime }) => {
              return parseTime(createTime)
            }
          },
          {
            prop: 'lastUpdateBy',
            label: '修改人',
            minWidth: 150,
            type: 'hidden'
          },
          {
            prop: 'lastUpdateTime',
            label: '修改时间',
            minWidth: 150,
            formatData: ({ lastUpdateTime }) => {
              return parseTime(lastUpdateTime)
            }
          }],
        btnList: !this.isProduction ? [
          {
            buttonName: '新增',
            optCode: 'add',
            outerFlag: true
          },
          {
            buttonName: '编辑',
            optCode: 'edit',
            outerFlag: true
          },
          {
            buttonName: '删除',
            optCode: 'del',
            outerFlag: true
          },
          {
            buttonName: '启用',
            optCode: 'enable',
            outerFlag: true
          },
          {
            buttonName: '停用',
            optCode: 'disable',
            outerFlag: true
          }] : null
      }
    }
  },

  created() {

  },
  methods: {
    btnOperate(code) {
      switch (code) {
        case 'add':
          this.handleEdit()
          break
        case 'edit':
          if (!this.singleJudge(this.tableSelected, '编辑', true)) {
            return
          }
          this.handleEdit(this.tableSelected[0])
          break
        case 'del':
          if (!this.singleJudge(this.tableSelected, '删除', true)) {
            return
          }
          this.handleDelete()
          break
        case 'disable':
          if (!this.singleJudge(this.tableSelected, '停用', true)) {
            return
          }
          this.handleChangeStatus(0) // state 1：启用  0：停用
          break
        case 'enable':
          if (!this.singleJudge(this.tableSelected, '启用', true)) {
            return
          }
          this.handleChangeStatus(1) // state 1：启用  0：停用
          break
        default:
          break
      }
    },
    // 刷新表格数据
    refreshTable(isInit) {
      this.$nextTick(() => {
        this.$refs.refTable.initTableData(isInit ? '' : 'onPage')
      })
    },
    // 新增/编辑基础信息
    handleEdit(row) {
      this.activeRowData = row && row.id ? row : ''
      this.$nextTick(() => {
        this.showEdit = true
      })
    },
    // 查看详情
    handleDetail(row) {
      if (!row.id) {
        this.$message.warning('请选择一条数据')
        return
      }
      this.activeRowData = row
      this.$nextTick(() => {
        this.showDetail = true
      })
    },
    // 查看已读明细
    handleRedLog(row) {
      if (!row.id) {
        this.$message.warning('请选择一条数据')
        return
      }
      this.activeRowData = row
      this.$nextTick(() => {
        this.showRedLog = true
      })
    },
    /**
     * 处理启用/停用
     * @param {Number} state 1 启用 0 停用
     * @param {String} id
    */
    handleChangeStatus(state) {
      const tmpArr = this.tableSelected.filter(row => row.enableFlag === state)
      if (tmpArr.length > 0) {
        this.$message.warning(`当前所选包含${state ? '启用' : '停用'}状态，请勿重复操作`)
        return
      }
      this.$confirm(`此操作将当前所选${state ? '启用' : '停用'},是否继续`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.tableSelected[0].id
        const params = { id, enableFlag: state }
        updatState(params).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '操作成功',
              type: 'success'
            })
            this.refreshTable()
          }
        })
      })
    },
    // 删除处理
    handleDelete() {
      const { id, name, enableFlag } = this.tableSelected[0]
      if (Number(enableFlag || 0) === 1) {
        this.$message.warning('只允许删除停用状态的风格')
        return
      }
      this.$confirm(`此操作将永久删除风格【${name}】, 是否继续?`, '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delConfig(id).then(res => {
          if (res.success === 1) {
            this.$message({
              message: res.msg || '删除成功',
              type: 'success'
            })
            this.refreshTable()
          }
        })
      }).catch(() => {})
    }
  }
}
</script>
<style lang='scss' scoped>

</style>
